<template>
  <div class="dialog-service-container">
    <el-button @click="handleOpenTextDialog">打开文本内容弹框</el-button>
    <!-- <button @click="handleOpenTextDialog">打开HTML内容弹框</button> -->
    
    <el-button @click="handleOpenComponentDialog">打开Vue组件内容弹框 - jsx</el-button>
    <el-button @click="handleOpenComponentDialogFromJs">打开Vue组件内容弹框 - js</el-button>
  </div>
</template>

<script lang="jsx" setup>
import { ref, watch, markRaw, h, createVNode } from 'vue';
import { createDialog } from '../plugins/dialog';
import SearchGroup from '@/components/SearchGroup.vue'

// js
const searchItemForJsRef = ref(null)
const handleOpenComponentDialogFromJs = () => {
  // console.log( h(SearchGroup));
  // console.log(createVNode(SearchGroup));
  // console.log(() => createVNode(SearchGroup));
  
  createDialog({
    title: '组件弹框',
    width: '1000px',
    content: () => createVNode(SearchGroup,
      {
        ref: searchItemForJsRef,
        searchItem: searchItem.value,
        onHandleSearch: handleSearch
      }
    ),
    onConfirm: (instance) => {
      instance.handleSearch();
      console.log('js确认按钮被点击');
    },
    onCancel: () => {
      console.log('js取消按钮被点击');
      return true; // 返回 true 以关闭弹框
    }
  });
}


// jsx
const searchItemRef = ref(null)
const searchItem = ref([
  { name: 'billNo', label: '账单编号', type: 'text', span: 6 },
  { name: 'shipAgencyName', label: '船舶代理', type: 'text', span: 6 },
])
const handleSearch = (searchParams) => {
  console.log('搜索参数:', searchParams);
  // 在这里处理搜索逻辑
}
const handleOpenComponentDialog = () => {
  // console.log( <SearchGroup ref={searchItemRef} searchItem={searchItem.value} onHandleSearch={() => handleSearch()}></SearchGroup>);
  // console.log(() => <SearchGroup ref={searchItemRef} searchItem={searchItem.value} onHandleSearch={() => handleSearch()}></SearchGroup>);
  // console.log((() => <SearchGroup ref={searchItemRef} searchItem={searchItem.value} onHandleSearch={() => handleSearch()}></SearchGroup>)());
  
  createDialog({
    title: '组件弹框',
    width: '1000px',
    content: () => <SearchGroup ref={searchItemRef} searchItem={searchItem.value} onHandleSearch={() => handleSearch()}></SearchGroup>,
    onConfirm: () => {
      searchItemRef.value.handleSearch();
      console.log('确认按钮被点击');
    },
    onCancel: () => {
      console.log('取消按钮被点击');
      return true; // 返回 true 以关闭弹框
    }
  });
}

const dialogPro = ref(null);
watch(dialogPro, (newVal) => {
  console.log('Dialog changed:', newVal);
});
const handleOpenTextDialog = () => {
  dialogPro.value = createDialog({
    title: '服务弹框',
    content: '这是一个通过服务创建的弹框',
    onConfirm: () => {
      console.log('确认按钮被点击');
      return true; // 返回 true 以关闭弹框
    },
    onCancel: () => {
      console.log('取消按钮被点击');
      return true; // 返回 true 以关闭弹框
    }
  });
}
</script>

<style lang='less' scoped>
.dialog-service-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
  button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #0056b3;
    }
  }
}
</style>